<template> 
    <div class="app-container">
       <el-row>
           <el-col :span="24">
              <div :id="lineChartId" style="height:300px;"></div>
           </el-col>
       </el-row>
       <el-row>
           <el-col :span="24">
              <div :id="barChartId" style="height:300px;"></div>
           </el-col>
       </el-row>
    </div>
</template>
<script>
    //将$都替换为$
    import {getShopExpenseByMonth, getShopExpenseByCate} from '@/api/mer/shopExpense'
    import echarts from 'echarts'
    import echartsTheme from "@/components/echarts/theme/westeros.json";
    import {formatDate} from '@/utils/date';

    export default {
        name: 'shopExpense',
        data() {
            return {
               lineChartId:"lineChart",
               barChartId:"barChart",
               lineChart:null,
               barChart:null,
               lineChartOption:{
                    legend: {data:['月支出']},
                    xAxis: {
                         type: 'category',   // 还有其他的type，可以去官网喵两眼哦
                         data: [],   // x轴数据
                         name: '月'
                    },
                    yAxis: {
                        type: 'value',
                        name: '金额'
                    },
                    tooltip: { trigger: 'axis'},
                    series: [
                        {
                            name: '月支出',
                            data: [],
                            type: 'line',
                            itemStyle: {
                                normal: {
                                    color: '#FD6B71',
                                    label: {
                                        show: true,
                                        position: 'top',
                                        textStyle: {
                                            color: '#606266'
                                        }
                                    }
                                }
                            },
                        }
                    ]
               },
               barChartOption:{
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['分类统计']
                    },
                    yAxis : [
                        {
                            type : 'value',
                            name: '金额'
                        }
                    ],
                    xAxis: {
                        type: 'category',   
                        data: [],   // x轴数据
                        splitLine: {show: false},
                        name: '分类'   // x轴名称 
                    },
                    series: [
                        {
                            name: '分类统计',
                            data: [],
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#FD6B71',//设置柱子颜色
                                    label: {
                                            show: true,//柱子上显示值
                                            position: 'top',
                                            textStyle: {
                                                color: '#606266'//值得颜色
                                            }
                                        }
                                    }
                            },
                            barWidth: 35
                        }
                    ]
               }
            }
        },
        created() {
            //this.initChart();
            this.loadLineChart();
            this.loadBarChart();
        },
        filters: {
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            }
        },
        beforeDestroy() {
			if (this.lineChart) {
                this.lineChart.dispose();
                this.lineChart = null;
			}
			if (this.barChart) {
                this.barChart.dispose();
                this.barChart = null;
			}
        },
        methods: {
            initChart(){
                 this.$nextTick(() => {
                    echarts.registerTheme('westeros', echartsTheme)
                    this.lineChart = echarts.init(document.getElementById(this.lineChartId),'westeros');
                    //this.loadLineChart()
                    //this.barChart = echarts.init(document.getElementById(this.barChartId),'westeros');
                    this.lineChart.setOption(this.lineChartOption);
                })
            },
            loadLineChart(){
                getShopExpenseByMonth().then(response => {
                    let result = response.data;
                    if(result){
                        result.sort((a,b)=>{
                            if(a.month<b.month) return -1
                            if(a.month>b.month) return 1
                            return 0
                        })
                        this.lineChartOption.xAxis.data = [];
                        this.lineChartOption.series[0].data = []
                        for(let item of result){
                            this.lineChartOption.xAxis.data.push(item.month+"月")
                            this.lineChartOption.series[0].data.push(item.money)
                        }
                        this.$nextTick(() => {
                            echarts.registerTheme('westeros', echartsTheme)
                            this.lineChart = echarts.init(document.getElementById(this.lineChartId),'westeros');
                            this.lineChart.setOption(this.lineChartOption)
                        })
                    }
                
                });
            },
            loadBarChart(){
                getShopExpenseByCate().then(response => {
                    let result = response.data;
                    if(result){
                       
                        this.barChartOption.xAxis.data = [];
                        this.barChartOption.series[0].data = []
                        for(let item of result){
                            this.barChartOption.xAxis.data.push(item.cateName)
                            this.barChartOption.series[0].data.push(item.money)
                        }
                        this.$nextTick(() => {
                            echarts.registerTheme('westeros', echartsTheme)
                            this.barChart = echarts.init(document.getElementById(this.barChartId),'westeros');
                            this.barChart.setOption(this.barChartOption)
                        })
                    }
                
                });
            }
           
            
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>


</style>


